<template>
  <div class="header-nav mb-3 pb-1 w-100" style="position: relative">
    <div class="fixed-top bg-white">
      <div class="container-xxl mx-auto position-relative justify-content-center mx-0 px-0">
        <div class="container-xxl mx-auto px-1 my-2">
          <!-- nav -->
          <nav role="navigation" class="py-0 navbar navbar-expand-md navbar-light bg-light align-middle bg-white middle-center col justify-content-between " >
            <div class="navbar-brand logo align-middle middle-center">
              <!-- <img src="https://www.ibox.com/zh-cn/static/img/normal.3e24a70.svg" alt="" class=""> -->
            </div>
            <div class="align-middle middle-center">
              <button class="btn navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-lg-0">
                  <li class="nav-item mx-md-1 mx-2">
                    <a class="nav-link active" aria-current="page" href="#/">首页</a>
                  </li>
                  <li class="nav-item mx-md-1 mx-2">
                    <a class="nav-link active" aria-current="page" href="#/product">新品</a>
                  </li>
                  <li class="nav-item mx-md-1 mx-2">
                    <a class="nav-link active" aria-current="page" href="#/transfer">转让</a>
                  </li>
                  <li class="nav-item mx-md-1 mx-2">
                    <a class="nav-link active" aria-current="page" href="#">我的</a>
                  </li>
                  <li class="nav-item mx-md-1 mx-2">
                    <a class="nav-link active" aria-current="page" href="#">帮助</a>
                  </li>
                  <li class="nav-item mx-md-1 mx-2">
                    <a href="#" class="navbar-brand active nav-link bg-primary rounded-pill px-3 mx-2">
                      <img src="" alt="">
                      <span class="h6 text-light">连接钱包</span>
                    </a>
                  </li>
                  <li class="nav-item mx-2 navbar-brand">
                    <!-- 下拉菜单 -->
                    <div class="dropdown">
                      <a class="" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,20">
                        <img class="align-self-center" src="../../assets/img/wl.png" alt="">
                      </a>
                      <ul class="dropdown-menu dropdown-menu-end my-3" aria-labelledby="dropdownMenuButton1">
                        <li><a class="dropdown-item" href="#">简体中文</a></li>
                        <li><a class="dropdown-item" href="#">繁体中文</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
                
              </div>
            </div>
          </nav>
          <!-- 帆布 -->
          <div class="offcanvas offcanvas-start col-2" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
            <div class="offcanvas-header">
              <h5 class="offcanvas-title" id="offcanvasExampleLabel">ibox.com</h5>
              <button id="close" type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="accordion accordion-flush ms-3" id="accordionFlushExample">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item mx-2 my-2">
                    <a class="nav-link active text-dark" aria-current="page" @click="goTo('/')">首页</a>
                  </li>
                  <div class="accordion-item"></div>
                  <li class="nav-item mx-2 my-2">
                    <a class="nav-link active text-dark" aria-current="page" @click="goTo('/product')">新品</a>
                  </li>
                  <div class="accordion-item"></div>
                  <li class="nav-item mx-2 my-2">
                    <a class="nav-link active text-dark" aria-current="page" @click="goTo('/transfer')">转让</a>
                  </li>
                  <div class="accordion-item"></div>
                  <li class="nav-item mx-2 my-2">
                    <a class="nav-link active text-dark" aria-current="page" @click="goTo()">我的</a>
                  </li>
                  <div class="accordion-item"></div>
                  <li class="nav-item mx-2 my-2">
                    <a class="nav-link active text-dark" aria-current="page" @click="goTo()">帮助</a>
                  </li>
                  <div class="accordion-item"></div>
                  <li class="nav-item mx-2 my-2">
                  </li>
                </ul>
            </div>
          </div>


        </div>
      </div>
    </div>
    <!-- container-fluid -->
  </div>
</template>

<script>
export default {
  name: "header-nav",
  data() {
    return {
      current: 0,
      btn: ''
    };
  },
  created() {
    
  },
  methods: {
    setcurrent(i){
      this.nav[this.current].class = 'nav-link active nav-nolink'
      this.nav[i].class = 'nav-link active'
      this.current = i
    },
    goTo(url){
      if (url){
        const hash = location.hash
        if(hash === url){
          this.btn.click()
          return
        }else{
          this.btn.click()
          this.$router.push(url)
        }
      }
    }
  },
  mounted(){
    this.btn = document.getElementById('close')
  }
};
</script>
<style scoped lang="scss">

.logo{
  width: 146px;
  height: 50px;
  background: url(https://www.ibox.com/zh-cn/static/img/normal.3e24a70.svg) 50% no-repeat; 
  background-size: 120% auto;
}

</style>